<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-03 19:35:17
 * @LastEditors: 171
 * @LastEditTime: 2022-09-18 13:10:26
-->
<template>

  <div class="my-container">
    <el-descriptions
      class=""
      title="Info"
      :column="1"
      size="large"
      border
      direction="horizontal"
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            Username
          </div>
        </template>
        动物学博士陈睿
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            Wechat
          </div>
        </template>
        不知道
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            Place
          </div>
        </template>
        福建三明
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            Remarks
          </div>
        </template>
        <el-tag size="small">
          <el-link :underline="false" href="https://space.bilibili.com/523668635" target="_blank">
            动物学博士陈睿
          </el-link>
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        <el-tag size="small">
          <el-link :underline="false" href="https://www.bilibili.com/video/BV1ed4y1w71y" target="_blank">
            关注陈睿谢谢喵
          </el-link>
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Sunny />
            </el-icon>
            Signature
          </div>
        </template>
        我们的Bilibili正在蒸蒸日上哦
      </el-descriptions-item>
    </el-descriptions>
  </div>

</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const size = ref('')
const iconStyle = computed(() => {
  const marginMap: any = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped lang="less">
.my-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.el-descriptions{
  width: 50%;
  opacity: 0.95;
  :deep(&__header){
    justify-content: center;
  }
  :deep(&__title){
    font-family: Jokerman;
    color: #fff;
    font-size: 30px !important;
  }
  :deep(&__body){
    border-radius: 10px;
    overflow: hidden;
  }
}
.cell-item {
  display: flex;
  align-items: center;
}
</style>
